@font-face {
    font-family: 'Lora';
    src: url(/fonts/Lora-VariableFont_wght.ttf) format('truetype');
}

body {
    background-color: #ffb8cc;
}

.name {
    font-family: 'Lora', serif;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0;
    font-size: 15vh;
    position: fixed; /* or 'absolute' depending on your needs */
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
}

nav {
    font-family: 'Lora', serif;
    position: fixed; /* Keeps the nav fixed during scroll */
    top: 25%; /* Aligns the nav vertically to the middle */
    right: 1em; /* Positions the nav to the far right */
}

nav li {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    font-size: 9vh;
    list-style-type: none;
}

ul {
    list-style-type: none;
}

:any-link {
    text-decoration: none;
    color: black;
}
@media (max-width: 768px) {
    .name {
        writing-mode: vertical-rl;
        font-size: 10vh;
    }

    nav li {
        font-size: 5vh;
    }
}